<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image></view>
					<view class="index_wenben baise">{{ $t('page_shenqingdb.apply_for_packaging') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom:140rpx;'">
			<view class="shenqingdb_center">
				<view class="shenqingdb_item1">
					<view class="shenqingdb_item1_txt">
						<image :src="imgUrl + '/dzx_img34.png'"></image>
						<text>{{ $t('page_shenqingdb.hint_text') }}</text>
					</view>
				</view>
				<!-- <view class="shenqingdb_center2">
        <view class="shenqingdb_center2_txt">
          <image src="../../images/dzx_img37.png'"></image>
          <text>暂无数据</text>
        </view>
      </view> -->
				<view class="shenqingdb_item2">
					<view class="shenqingdb_item2_list" v-if="arrlist.length != 0">
						<view class="shenqingdb_item2_cont" v-for="(item, index) in arrlist" :key="index">
							<view class="shenqingdb_item2_t">
								<view class="shenqingdb_item2_t_l">
									<view class="shenqingdb_item2_t_limg" @tap="gouxuan" :data-id="item.id" :data-index="index" :data-weight="item.weight">
										<image :src="imgUrl + (item.is_show ? 'dzx_img36' : 'dzx_img35') + '.png'"></image>
									</view>
									<view class="shenqingdb_item2_t_txt">
										<image :src="imgUrl + '/dzx_img24.png'"></image>
										<text>{{ item.storage?item.storage.shop_name:'' }}</text>
									</view>
								</view>
								<view class="shenqingdb_item2_t_r" @tap="tiaozhuan" :data-id="item.id">
									<text>{{ $t('page_shenqingdb.check_details') }}</text>
									<image :src="imgUrl + '/dzx_img17.png'"></image>
								</view>
							</view>

							<view class="shenqingdb_item2_c">
								<view class="shenqingdb_item2_t_txt">
									<image :src="imgUrl + '/dzx_img27.png'"></image>
									<text>{{ $t('page_shenqingdb.parcel_no') }}：{{ item.express_num }}</text>
									<text style="color: #ff6600" v-if="item.source == 6">{{$t('page_other.拼')}}</text>
								</view>
							</view>

							<view class="shenqingdb_item2_b">
								<view class="shenqingdb_item2_bcont" v-if="item.country">
									<view class="shenqingdb_item2_b1">{{ $t('page_shenqingdb.shipping_country') }}：</view>
									<view class="shenqingdb_item2_b2">{{ item.country.title }}</view>
								</view>
								<view class="shenqingdb_item2_bcont" v-if="item.class_name">
									<view class="shenqingdb_item2_b1">{{ $t('page_shenqingdb.item_information') }}：</view>
									<view class="shenqingdb_item2_b2">{{ item.class_name }}</view>
								</view>
								<view class="shenqingdb_item2_bcont" v-if="item.created_time">
									<view class="shenqingdb_item2_b1">{{ $t('page_shenqingdb.forecast_time') }}：</view>
									<view class="shenqingdb_item2_b2">{{ item.created_time }}</view>
								</view>
								<view class="shenqingdb_item2_bcont" v-if="item.remark">
									<view class="shenqingdb_item2_b1">{{ $t('page_shenqingdb.remarks') }}：</view>
									<view class="shenqingdb_item2_b2">{{ item.remark }}</view>
								</view>
								<view class="cangkuyuan_baoguoliebiao_item3_w1 pcicang" v-if="item.packageimage != ''">
									<view class="baoguopic">{{ $t('page_indexs_dairuku.package_image') }}：</view>
									<!-- <text @click="previewImage">查看图片</text> -->
									<view class="index_item5_cont_bottom_img" :data-url="item" @click="previewImage">
										<view class="index_item5_cont_bottom_imgs"
											v-for="(items, index1) in item.packageimage" :key="index1" :data-url="items"
											:data-index="index1" @click="getIndex">
											<image :src="items.file_path" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="my_dingdan_zanwu" v-else>
						<image :src="imgUrl + '/dzx_img43.png'"></image>
						<text>{{ $t('page_shenqingdb.no_order_yet') }}</text>
					</view>
				</view>
				<view class="shenqingdb_item3">
					<view class="shenqingdb_item3_dis">
						<view class="shenqingdb_item3_txt" @tap="quanxuan">
							<image :src="imgUrl + (isshows ? 'dzx_img36' : 'dzx_img35') + '.png'"></image>
							<text>{{ $t('page_shenqingdb.total', { total: current.length }) }}</text>
						</view>
						<view class="shenqingdb_item3_btns" @tap="tijiaodabao">{{ $t('page_shenqingdb.submitPackage') }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			arrlist: [],
			//分页
			page: 1,
			ispage: true,
			current: [],
			//勾选数组
			isshows: false,
			weight: [] ,//重量
			artimages: [],
			imgindex: 0,
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ 
	onLoad() {
		var that = this;
		that.current = []
		that.weight =  []
		that.checkuserinfo();
	},
	onShow() {
		var that = this;
		that.page= 1
		that.isshows= false
		that.arrlist= []
		that.shangpinpinlei();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {
		if (this.ispage) {
			this.page = this.page + 1
			this.shangpinpinlei();
		}
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		getIndex(e) {
			this.imgindex = e.currentTarget.dataset.index
		},
		previewImage(e) {
			var len = e.currentTarget.dataset.url.packageimage.length;
			console.log(len, 88888);
			var artimages = this.artimages;
			for (var i = 0; i < len; i++) {
				artimages[i] = e.currentTarget.dataset.url.packageimage[i].file_path;
			}
			uni.previewImage({
				current: this.imgindex,
				urls: this.artimages
			});
		},
		//校验是否填写完成必填项目
		checkuserinfo() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/page/checkuserinfo&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 0) {
					uni.showToast({
						title:res.data.msg,
						icon:"none",
						duration:2000
					})
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/mys/my_userinfo/my_userinfo'
						});
					},2000)
				}
			});
		},
		quanxuan() {
			var that = this;
			var current = [];
			var weight = [];
			var arrlist = that.arrlist;

			if (arrlist.length == 0) {
				uni.showToast({
					title: '暂无订单可选',
					icon: 'none'
				});
			} else {
				if (that.isshows) {
					that.isshows = false

					for (var i in arrlist) {
						arrlist[i].is_show = false;
					}
					that.current = []
					that.arrlist= arrlist
					that.weight = []

				} else {
					that.isshows = true

					for (var i in arrlist) {
						arrlist[i].is_show = true;
						current.push(arrlist[i].id);
						weight.push(arrlist[i].weight);
					}

					that.current= current
					that.weight = weight,
					that.arrlist = arrlist
				}
			}
		},

		gouxuan(e) {
			var that = this;
			var cunruids = that.current;
			var weight = that.weight;
			var arrlist = that.arrlist;

			if (arrlist[e.currentTarget.dataset.index].is_show) {
				arrlist[e.currentTarget.dataset.index].is_show = false;

				for (var i in cunruids) {
					if (cunruids[i] == e.currentTarget.dataset.id) {
						cunruids.splice(i, 1);
						weight.splice(i, 1);
					}
				}
			} else {
				arrlist[e.currentTarget.dataset.index].is_show = true;
				cunruids.push(e.currentTarget.dataset.id);
				weight.push(e.currentTarget.dataset.weight);
			}
			that.current= cunruids
			that.weight = weight,
			that.arrlist = arrlist
			
			if (cunruids.length == arrlist.length) {
				that.isshows = true
			} else {
				that.isshows = false
			}

			console.log(e.currentTarget.dataset.index);
		},

		tiaozhuan(e) {
			uni.navigateTo({
				url: '/pages/indexs/dairuku_xq/dairuku_xq?id=' + e.currentTarget.dataset.id
			});
		},

		shangpinpinlei() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token'),
				page: this.page
			};
			if(uni.getStorageSync("usermark")){
				data['usermark'] = uni.getStorageSync("usermark").mark;
			}
			request.post(`index.php?s=/api/package/unpack&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					if (that.page > res.data.data.last_page) {
						that.ispage = false
					} else {
						that.arrlist = that.arrlist.concat(res.data.data.data)
					}
				}
			});
		},

		tijiaodabao() {
			if (this.current.length == 0) {
				uni.showToast({
					title: $t('page_other.还未勾选包裹'),
					icon: 'none'
				});
			} else {
				var sum = 0;
				for (var i = 0; i < this.weight.length; i++) {
					sum += this.weight[i];
				}

				console.log(sum, '?');
				var strings = this.current.toString();
				uni.navigateTo({
					url: '/pages/mys/my_querendb/my_querendb?id=' + strings + '&sum=' + sum + '&shuliang=' + this.current.length
				});
			}
			this.current =[];
			this.weight = [];
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './shenqingdb.css';
</style>
